﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataView.aspx.cs" Inherits="EXT_DataView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>
   <%-- <link rel="stylesheet" type="text/css" href="../Ext2.2/resources/css/ext-all.css" />
    <script src="../Ext2.2/ext-base.js"></script>
    <script src="../Ext2.2/ext-all.js"></script>
    <script src="../Ext2.2/ext-lang-zh_CN.js"></script>
    
    <link rel="Stylesheet" type="text/css" href="../Ext2.2/data-view.css" />
    <script src="../Ext2.2/data-view-plugins.js"></script>--%>
    <link rel="stylesheet" type="text/css" href="../js/ext-4.0.1/resources/css/ext-all.css"/>
    <script src="../js/ext-4.0.1/bootstrap.js" type="text/javascript"></script>
 <%--   <script type="text/javascript" src="../js/workflow/workflow.js"></script>--%>
    <script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
     <link rel="stylesheet" type="text/css" href="../admin/resources/admin.css"/>
    <link href="../Ext.ux.UploadDialog/UploadDialog/css/data-view.css" rel="stylesheet"
        type="text/css" />
    <%--<link rel="stylesheet"  href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
    <script type="text/javascript" src="Ext.ux.UploadDialog/Ext.ux.UploadDialog.packed.js"></script>--%>

    <script src="../Ext.ux.UploadDialog/UploadDialog/DragSelect.js" type="text/javascript"></script>
    <script src="../Ext.ux.UploadDialog/UploadDialog/LabelEditor.js" type="text/javascript"></script>
    <style type="text/css">
        #custom {
            cursor:move;
        }
        #custom-rzwrap{
            z-index: 100;
        }
        #custom-rzwrap .x-resizable-handle{
            width:11px;
            height:11px;
           <%-- background:transparent url(../Ext2.2/resources/images/default/sizer/square.gif) no-repeat;--%>
            margin:0px;
        }
        #custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{
            top:45%;
        }
        #custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{
            left:45%;
        }
    </style>
    <script language="javascript">
        window.focus();
        Ext.Loader.setConfig({ enabled: true });
        Ext.Loader.setPath('Ext.ux.DataView', '../Ext.ux.UploadDialog/UploadDialog/'); 
        Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.util.*',
    'Ext.view.View',
    'Ext.ux.DataView.DragSelector',
       'Ext.ux.DataView.LabelEditor']);
        Ext.onReady(function() {
            //        var xd = Ext.data;

            Ext.tip.QuickTipManager.init();
            Ext.define('imageurl', {
                extend: 'Ext.data.Model',
                fields: [{ name: 'name', type: 'string' }, { name: 'url', type: 'string' }, { name: 'size', type: 'float'}]

            });

            var store = new Ext.data.Store({
                model: 'imageurl',
                autoLoad: true,
                //            autoSync: true,
                //            queryMode: 'local',

                proxy: {
                    type: 'ajax',
                    url: '../DataViewImages.aspx',
                    reader: {
                        type: 'json',
                        root: 'images'
                    }
                }

            });

            store.load();

            var tpl = new Ext.XTemplate(
		    '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
		        '<div class="thumb" ><img src="{url}" title="{name}"></div>',
		        '<span class="">{shortName}</span>',
		        '<span>{sizeString}</span>',
            //		        '<span>{dateString}</span>',
		        '</div>', //x-editable可编辑  .thumb-wrap span
            '</tpl>',
            '<div class="x-clear"></div>'
	    );

            //	    var win = new Ext.Window({
            //    	    title: "显示图片",
            //    	    resizable: false,
            //    	    closable:false,
            //    	    closeAction:'close',
            //    	    modal: true,
            //    	    width: '600px',
            //    	    height: '500px',
            //    	    contentEl: "div1",
            //    	    buttonAlign: "center",
            //    	    buttons: [{
            //    	        text:"关闭",
            //    	        handler: function(){
            //        	        win.hide();
            //    	        }
            //    	    }]
            //	    });
            var customEl;
            var ResizableExample = {
                init: function() {
                    var custom = new Ext.Resizable('custom', {
                        wrap: true,
                        pinned: true,
                        minWidth: 500,
                        minHeight: 500,
                        preserveRatio: true,
                        handles: 'all',
                        draggable: true,
                        dynamic: true
                    });
                    customEl = custom.getEl();
                    // move to the body to prevent overlap on my blog
                    document.body.insertBefore(customEl.dom, document.body.firstChild);

                    customEl.on('dblclick', function() {
                        customEl.hide(true);
                    });
                    customEl.hide();

                    //                Ext.get('showMe').on('click', function(){
                    //                    customEl.center();
                    //                    customEl.show(true);
                    //                });
                }
            };

            Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);


            var dataview = new Ext.view.View({
                store: store,
                id: "dv",
                //tpl: tpl,
                tpl: [
                        '<tpl for=".">',
                        '<div class="thumb-wrap" id="{name}">',
                        '<div class="thumb"><img src="{url}" title="{name}"></div>',
                        '<span class="x-editable">{shortName}</span></div>',
                        '</tpl>',
                        '<div class="x-clear"></div>'
                        ],
                //height: 300,
                autoHeight: true,
                //            simpleSelect: true,
                multiSelect: true,
                trackOver: true,
                //            singleSelect: true,
                overItemCls: 'x-item-over',
                overClass: 'x-view-over',
                itemSelector: 'div.thumb-wrap',
                emptyText: 'No images to display',

                plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'name' })
                // new Ext.DataView.DragSelector()
                //                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

                prepareData: function(data) {
                    data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                    data.sizeString = Ext.util.Format.fileSize(data.size);
                    //                data.dateString = data.date.format("m/d/Y g:i a");
                    return data;
                },

                listeners: {
                    selectionchange: {
                        fn: function(dv, nodes) {
                            var l = nodes.length;
                            var s = ''; //l != 1 ? 's' : '';
                            panel.setTitle('图片列表 (' + l + ' 项' + s + ' 被选中)');
                        }

                    },
                    'itemdblclick': function(dv, nodes) {
                        var selNode = dataview.getSelectedNodes()[0];
                        //var selNode = nodes[0];
                        var i = document.getElementById("custom");
                        //        	        i.style.visibility = "visible";
                        i.src = "../Upload/" + selNode.id;

                        customEl.center();
                        customEl.show(true);
                        //            	    win.show(this);
                        //            	    win.center();
                    }
                }
            })


            var panel = new Ext.Panel({
                id: 'images-view',
                frame: true,
                width: 535,
                autoHeight: true,
                collapsible: true,
                layout: 'fit',
                title: '图片列表(0 项 被选中)',
                tbar: [
                { text: "添加图片", handler: insertImages }, "-",
                { text: "删除图片", handler: deleteImages },"-",
                { text: "浏览原图", handler: lookview }
            ],
                butttonAlign: "left",
                tools: [{
                    id: "refresh",
                    qtip: "刷新图片列表",
                    listeners: { 'click': function() {
                        panel.body.mask("加载中...", 'x-mask-loading');

                        setTimeout(function() {
                            store.load();
                            panel.body.unmask();
                        }, 1000);
                    }
                    }
}],
                    items: dataview
                });
                panel.render("divP");
                panel.collapse(Ext.Component.DIRECTION_TOP, true, dataview);
                Ext.define('insertimage', {
                    extend: 'Ext.form.Panel',
                    alias: 'widget.insertimage',
                    title: '文件上传',
                    width: 400,
                    height: 300,
                   // bodyPadding: 10,
                    // margin: '50 10 50 80',

                    frame: true,
                    //renderTo: 'upload',
                    items: [

                   {
                    
                         id : 'imageBrowse',
                         fieldLabel : "预览扫描件",
                         xtype : "textfield",
                         inputType : "image",
                          width : 400,
                          height : 100,
                          name : 'imageBrowse'
 
           
                   },
                     {
                        xtype: 'filefield',
                        name: 'fileName',
                        id:'fileName',
                        fieldLabel: '上传',
                        labelWidth: 50,
                         width : 350,
                          height : 100,
                        regex: /^.+\.(bmp|jpg|png|gif|JPG|GIF|PNG|BMP)$/,
                        regexText: "你只能选择jpg,png,gif格式的图片",
                        msgTarget: 'side',
                        allowBlank: false,
                       // anchor: '100%',
                        buttonText: '选择文件',
                        listeners:{'change':function ( ) {
                         
                         var path= 'file:///' +this.getValue( );
                          // Ext.getCmp('privewimage').setSrc(path);
                           if(Ext.isIE7){   
                                        var image = Ext.get('imageBrowse').dom;   
                                image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片   
                                image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src= path;   
                                }else{  
                                    // this.up('form').getForm().findByType("textfield")[0].getEl().dom.src =path ;
                                    var objectURL = window.URL.createObjectURL(this.fileInputEl.dom.files[0]);
//                                    var file =this.fileInputEl.dom.files.item(0).getAsDataURL();
//                                    path=file.mozFullPath;
//                                   path=this.fileInputEl.dom.files[0].mozFullPath
                                    Ext.get('imageBrowse').dom.src= path  ;   
                                }   
                           // Ext.get('privewimage').dom.src = this.
                            
                        }
                        }
                      }

                       
         
                        ],

                        buttons: [{
                            text: '上传',
                            handler: function() {
                                var form = this.up('form').getForm();
//                                var path=form.findField('fileName').getRawValue( );
//                                Ext.getCmp('privewimage').setSrc(path);
                                if (form.isValid()) {
                                    form.submit({
                                        url: '../UploadS.aspx',
                                        type: 'ajax',
                                        waitMsg: '正在保存文件...',
                                        success: function(fp, o) {
                                            // Ext.Msg.alert('提示信息', '文件成功上传,文件名字为：'+o.result.file);
                                            Ext.Msg.show({
                                                title: '提示信息',
                                                msg: '文件上传成功<br>上传文件名为：' + o.result.file,
                                                minWidth: 200,
                                                modal: true,
                                                buttons: Ext.Msg.OK
                                            })
                                              //Ext.get('imageBrowse').dom.src= o.result.path;
                                            form.findField('fileName').setRawValue('');
                                            store.load();
                                            Ext.getCmp('dv').refresh();
                                        }
                                    });
                                   Ext.getCmp('content1').setVisible(false);
                                    //                        Ext.getCmp('tasklist1').setVisible(true);


                                }
                                //var  timeId = window.setInterval("updateUsing()", 25000);  

                            }
}]
                        });
                        function insertImages() {
                            //            dialog = new Ext.ux.UploadDialog.Dialog({
                            //                  url: 'UploadS.aspx',
                            //		          width : 450,
                            //		          height : 300,
                            //		          minWidth : 450,
                            //		          minHeight : 300,
                            //		          draggable : true,
                            //		          resizable : true,
                            //		          modal: true,
                            //		         // reset_on_hide: false
                            //                 // getAllowCloseOnUpload:false,
                            //                  //allow_close_on_upload: false,   //关闭上传窗口是否仍然上传文件
                            //                 // upload_autostart: false   //是否自动上传文件
                            //                 // getUploadAutostart: false
                            //                });
                            //
                            //            dialog.show('show-button');

                            var contentdlg = Ext.create('Ext.window.Window', {
                                width: 400,
                                height: 300,
                                closable: true,
                                draggable: true,
                                resizable: false,
                                maximized: false,
                                modal: true,
                                title: '查看内容',
                                id: 'content1',
                                plain: true,
                                layout: 'fit',
                                //                layout: {
                                //                    type: 'vbox',
                                //                    align: 'stretch'
                                //                }, 
                                items: [{
                                    xtype: 'insertimage',
                                    id: 'mainform1'
}]
                                });
                                //                var selection = this.getView().getSelectionModel().getSelection()[this.getView().getSelectionModel().getSelection().length - 1];
                                //                changeDate(selection.data);
                                //                Ext.getCmp('mainform1').setActiveRecord(selection);
                                contentdlg.show();

                                // Ext.getCmp('dv').refresh();
                            };

                            function deleteImages() {
                                var nodecol = dataview.getSelectedNodes();
                                var count = nodecol.length;
                                // var count = dataview.getSelectionCount();
                                //var count = Ext.getCmp('dv').getSelectionCount();
                                var nodes = new Array();

                                if (count == 0) {
                                    Ext.Msg.show({
                                        title: "提示框",
                                        msg: "请选择要删除的图片",
                                        buttons: Ext.MessageBox.OK,
                                        icon: Ext.MessageBox.INFO
                                    });

                                    return false;
                                }

                                for (var i = 0; i < count; i++) {
                                    nodes[i] = dataview.getSelectedNodes()[i].id;
                                }

                                Ext.Msg.confirm("提示框", "你确认删除所选图片吗", function(button) {
                                    if (button == "yes") {
                                        Ext.MessageBox.show({
                                            msg: "请等待...",
                                            progress: true,
                                            progressText: '删除中...',
                                            width: 300,
                                            wait: true,
                                            waitConfig: {
                                                interval: 100,
                                                duration: 1000,
                                                fn: function() {
                                                    Ext.Ajax.request({
                                                        url: "../DeleteImages.aspx",
                                                        params: {
                                                            Nodes: nodes
                                                        },
                                                        callback: function(options, success, response) {
                                                            if (success) {
                                                                Ext.Msg.show({
                                                                    title: "提示框",
                                                                    msg: "删除图片成功",
                                                                    buttons: Ext.MessageBox.OK,
                                                                    icon: Ext.MessageBox.INFO,
                                                                    fn: function() {
                                                                        store.load();
                                                                        Ext.getCmp('dv').refresh();
                                                                    }
                                                                });
                                                            }
                                                            else {
                                                                Ext.Msg.show({
                                                                    title: "提示框",
                                                                    msg: "删除图片失败, 请重试",
                                                                    buttons: Ext.MessageBox.OK,
                                                                    icon: Ext.MessageBox.WARNING
                                                                });
                                                            }
                                                        }
                                                    });

                                                    Ext.MessageBox.hide();
                                                }
                                            },
                                            closable: true
                                        });
                                    }
                                });
                            }


                            //浏览原图
                            Ext.define("Ext.ux.DataView.seeimagesview", {
                                extend: 'Ext.form.Panel',
                                alias: 'widget.images-view',
                               // id: 'imgview',
                                height: 740,
                                width:400, 
                                img_index: 0,
                                img_view_id: this.id + '_img',

                                set_img: function(offset) {
                                    Ext.get(this.img_view_id).dom.src = this.src[this.img_index + offset];
                                    Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index + offset) == this.src.length - 1) ? true : false;
                                    Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index + offset) == 0) ? true : false;
                                    this.img_index = this.img_index + offset;
                                },
                                initComponent: function() {
                                    var cmp = this;
                                    this.html = '<img id=\'' + this.img_view_id + '\' src=\'' + this.src[0] + '\' ></img>';
                                    this.tbar = [
                                                                { text: "上一张", id: this.id + '_pre_btn', handler: function() {

                                                                    cmp.set_img(-1);
                                                                }
                                                                },
                                                                { text: "下一张", id: this.id + '_next_btn', handler: function() {
                                                                    cmp.set_img(1);
                                                                } }];
                                                             //  this.callParent(arguments);
                                                              // this.superclass.initComponent.call(this);
                                                              this.callParent();
                                   
                                },
                                afterRender: function() {
                                   // this.superclass.afterRender.call(this);
                                    Ext.get(this.img_view_id).parent = this;
                                    Ext.get(this.img_view_id).center();
                                    new Ext.dd.DD(Ext.get(this.img_view_id), 'pic');
                                    //Ext.get(this.img_view_id).dom.title='双击放大  右击缩小';
                                    Ext.get(this.img_view_id).on({
                                        'dblclick': { fn: function() {
                                            Ext.get(this).parent.zoom(Ext.get(this), 1.5, true);
                                        }
                                        },
                                        'contextmenu': { fn: function() {
                                            Ext.get(this).parent.zoom(Ext.get(this), 1.5, false);
                                        }
                                        }
                                    });
                                },
                                //放大、缩小
                                zoom: function(el, offset, type) {
                                    var width = el.getWidth();
                                    var height = el.getHeight();
                                    var nwidth = type ? (width * offset) : (width / offset);
                                    var nheight = type ? (height * offset) : (height / offset);
                                    var left = type ? -((nwidth - width) / 2) : ((width - nwidth) / 2);
                                    var top = type ? -((nheight - height) / 2) : ((height - nheight) / 2);
                                    el.animate(
                                                    {
                                                        height: { to: nheight, from: height },
                                                        width: { to: nwidth, from: width },
                                                        left: { by: left },
                                                        top: { by: top }
                                                    },
                                                     null,
                                                     null,
                                                    'backBoth',
                                                    'motion'
                                                );
                                           
                                },
                                  
                            });
                            function lookview() {
                                var selectids="";
                                var selects = store.getRange();
                                for (var i = 0; i < selects.length; i++) {
                                    if (i ==selects.length - 1)
                                    selectids +=  selects[i].data.url;
                                   
//                                    if (i < selects.length - 1) {
//                                        selectids += "'" + selects[i].data.url + "'" + ",";
//                                    }
//                                    else {
//                                        selectids += "'" + selects[i].data.url + "'";
//                                    }

                                }

                                var img1 = Ext.create('Ext.ux.DataView.seeimagesview', { src:[selectids], title: '图片浏览' });
//                                
//                                 var main_panel = new Ext.form.Panel({ 
//                                                       title: 'main_panel', 
//                                                       el: 'main_panel', 
//                                                            autoHeight: true, 
//                                                            bodyBorder: false, 
//                                                            collapsible: true, 
//                                                            renderTo: Ext.getBody(), 
//                                                            items: [img1] 
//                                                        }); 

                                var showimagelg = Ext.create('Ext.window.Window', {
                                width: 400,
                                    height:800,
                                    //autoHeight: true,
                                    closable: true,
                                    draggable: true,
                                    resizable: false,
                                    maximized: false,
                                    modal: true,
                                    title: '查看内容',
                                    id: 'content2',
                                    plain: true,
                                   // layout: 'vbox',
                                                  layout: {
                                                       type: 'vbox',
                                                       align: 'center'
                                                  }, 
                                    items: [
                                      // img1
                                      Ext.create('Ext.Img', {     src: selectids})

                                       ]
                                    });
                                    //                var selection = this.getView().getSelectionModel().getSelection()[this.getView().getSelectionModel().getSelection().length - 1];
                                    //                changeDate(selection.data);
                                    //                Ext.getCmp('mainform1').setActiveRecord(selection);
                                    showimagelg .show(); 
                            };
                         
                            store.load();
                        });
    
    </script>
</head>
<body>
   <div id="divP"></div>
   <div id="div1" style="text-align:center; vertical-align:middle"><img id="custom" width="200" height="150" style="position:absolute;left:0;top:0;" /></div>
</body>
</html>
